<template>
  <div class="sbtj-container">
    <div class="sbtj-title centerbox">变电站摄像机</div>
    <div
      class="sbtj-content"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="item zx">
        <div class="value centerbox">{{videoCountData.online}}</div>
        <div class="name centerbox">在线</div>
      </div>
      <div class="item gz">
        <div class="value centerbox">{{videoCountData.disable}}</div>
        <div class="name centerbox">故障</div>
      </div>
      <div class="item zs">
        <div class="value centerbox">{{videoCountData.count}}</div>
        <div class="name centerbox">总数</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  mounted() {
    this.videoCount({});
  }
  loading:boolean=false
  // 展示数据
  videoCountData: any = {
    count: 0,
    disable: 0,
    online: 0,
  };
  // 数据请求
  videoCount(params) {
    let data = {
      id: params.id,
      type: params.type,
    };
    this.loading=true;
    (this as any).$services
      .videoCount({ data })
      .then((result: any) => {
        this.loading=false;
        this.videoCountData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
         this.loading=false;
      });
  }
}
</script>

<style lang="scss" scoped>
.sbtj-container {
  width: 100%;
  height: 100%;
  .sbtj-title {
    width: 1.61rem;
    height: 0.35rem;
    background: url("../../../../../assets/img/VideoMonitor/bt.png") center
      center no-repeat;
    background-size: 100% 100%;
    margin: 0.1rem auto 0rem;
  }
  .sbtj-content {
    width: 100%;
    height: calc(100% - 0.45rem);
    position: relative;
    .item {
      width: 0.8rem;
      height: 0.82rem;
      position: relative;
      .name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.2rem;
        margin: auto;
        color: #fff;
      }
      .value {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.4rem;
        margin: auto;
        font-weight: 800;
      }
    }
    .zx {
      position: absolute;
      bottom: calc(50% + 0.1rem);
      right: calc(50% + 0.2rem);

      background: url("../../../../../assets/img/VideoMonitor/zx.png") center
        center no-repeat;
      background-size: 100% 100%;
      color: #03e3e9;
    }
    .gz {
      position: absolute;
      bottom: calc(50% + 0.1rem);
      left: calc(50% + 0.2rem);

      background: url("../../../../../assets/img/VideoMonitor/gz.png") center
        center no-repeat;
      background-size: 100% 100%;
      color: #e73847;
    }
    .zs {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin: auto;

      background: url("../../../../../assets/img/VideoMonitor/zs.png") center
        center no-repeat;
      background-size: 100% 100%;
      color: #1de76f;
    }
  }
}
</style>

